<script setup>
import { User, Lock,CircleCheck,LocationInformation } from '@element-plus/icons-vue'
import ValidCode from "@/components/ValidCode.vue";
import {ref} from "vue";

// import { useRoute } from 'vue-router';
const isRegister = ref(false); //默认是登录界面



const radio = ref(0)//登录身份选项
var  identifyCode=ref('')//登录验证码
const randomNum=(min, max)=>{
    return Math.floor(Math.random() * (max - min) + min)
}
const makeCode =function (identifyCodes, l) {
    // 清空之前的值
    identifyCode.value = ''
    for (let i = 0; i < l; i++) {
        identifyCode.value += identifyCodes[
            randomNum(0, identifyCodes.length)
            ]
    }
}
const refreshCode =()=> {
    // identifyCode = ''
    const identifyCodes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] //
    makeCode(identifyCodes, 4)
}
refreshCode()//每次刷新页面就刷新验证码

// 注册/登录的数据
const data=ref({
    account:'',
    password:'',
    address:'',//采购商才用输入的地址
    rePassword:'',//再次输入的密码
    input_code:'',//输入的验证码
    role:radio.value//选择登录的身份
})
//是否是采购商
const ifPurchaser=ref(true)

import { useRouter } from 'vue-router';
import {ElMessage} from "element-plus";
import {loginService, registerService} from "@/api/user";
import {userTokenStore} from "@/store/token";

const router = useRouter();
//注册的事件
const  register = async () => {
    data.value.role=radio.value;//注册身份
        let result = await registerService(data.value);
        ElMessage.success('注册成功！请重新登录');
}
const tokenStore=userTokenStore();//得到状态
//登录的事件
const  login = async () => {
    data.value.role=radio.value;//登录身份
    let result = await loginService(data.value);
    tokenStore.setToken(result.data)//保存token
    ElMessage.success('登录成功');
    localStorage.setItem('token', result.data);
    if(radio.value===0){
        router.push('/')//跳转到采购商首页
    }
    if(radio.value===1){
        router.push('/supplier/dataAnalysis')//跳转到供应商首页
    }
    if(radio.value===2){
        router.push('/manager/managerHome')//跳转到管理员首页
    }
}
// 注册数据的密码二次验证
const validateRePassword = (rule, value, callback) => {
   if (value === '' || value === null) {
       return  callback(new Error('请再次输入密码'))
 }
    if (data.value.password !== value) {
   return callback(new Error('两次密码不一致'))
   }
}
//验证 验证码是否输入正确
const validateInputeCode = (rule, value, callback) => {
    if (value === '' || value === null) {
        return  callback(new Error('请输入验证码'))
    }
    if (identifyCode.value !== value) {
        refreshCode()
        data.value.input_code=''
        return  callback(new Error('验证码输入错误'))
    }
}
//登录数据验证
const dataRules=ref({
    account:[
        {required:true,message:'请输入您的手机号',trigger:'blur'},
        {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    password:[
        {required: true, message: '请输入密码', trigger: 'blur' },
        {min:5,max:16, message: '密码长度需为5-16位', trigger: 'blur'}
    ],
    address:[
        {required:true,message:'请输入您的地址',trigger:'blur'},
        {min: 1,max:200, message: '请输入正确的地址', trigger: 'blur' }
    ],
    input_code:[
        { required: true, message: '请输入验证码', trigger: 'blur' },
        {validator:validateInputeCode,trigger:'blur'}
    ],
     rePassword: [
         { required: true, message: '请再次输入密码', trigger: 'blur' },
       {validator: validateRePassword, trigger: 'blur' }
   ]
})
//点击返回或注册清空表单的数据-->
const clearRegisterData = ()=>{
  data.value={
      account:'',
     password:'',
      address:'',
       rePassword:''
   }
}
</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="login-bg"></el-col>
        <!-- 登录表单 -->
        <el-form v-if="isRegister===false" class="login-form" size="small"  :rules="dataRules" :model="data">
            <h1 style="text-align: center; color: #f10180;  font-family: fantasy, STKaiti;">智链商控</h1>
            <el-form-item style="margin-top: 20px" prop="account">
               <el-input v-model="data.account" :prefix-icon="User" inline="true"  placeholder="请输入您的手机号"></el-input>
            </el-form-item>
            <el-form-item  prop="password">
                <el-input v-model="data.password" type="password"  :prefix-icon="Lock" placeholder="请输入您的密码" show-password></el-input>
            </el-form-item>
            <el-form-item  prop="input_code">
                <el-input  v-model="data.input_code" style="width: 300px;display:inline" :prefix-icon="CircleCheck" placeholder="请输入验证码"></el-input>
                <div class="login-code" @click="refreshCode">
                    <!--验证码组件-->
                    <ValidCode :identifyCode="identifyCode"></ValidCode>
                </div>
            </el-form-item>
            <el-form-item>
                <el-radio-group class="el-radio__input" v-model="radio">
                    <el-radio  :value="0">采购商</el-radio>
                    <el-radio :value="1">供应商</el-radio>
                    <el-radio :value="2">管理员</el-radio>
                </el-radio-group>
            </el-form-item>
<!--            登录按钮-->
            <el-form-item  style="display: inline-block;margin-left: 60px" >
                <el-button type="primary" size="default" @click="login();clearRegisterData();refreshCode();">
                    登录
                </el-button>
            </el-form-item>
            <el-form-item style="display: inline-block;margin-left: 90px">
                <el-button type="primary" size="default" @click="isRegister=true;clearRegisterData();refreshCode();ifPurchaser=true;radio=0">
                   注册
                </el-button>
            </el-form-item>
        </el-form >
        <!-- 注册表单 -->
        <el-form v-else class="register-form" size="small" :rules="dataRules" :model="data">

            <h1 style="text-align: center; color: #f10180;  font-family: fantasy, STKaiti;">
                智链商控
            </h1>
            <el-form-item style="margin-top: 10px"  prop="account">
                <el-input v-model="data.account" :prefix-icon="User" inline="true"  placeholder="请输入您的手机号"></el-input>
            </el-form-item>
            <el-form-item  prop="password">
                <el-input v-model="data.password" type="password"  :prefix-icon="Lock" inline="true"  placeholder="请输入您的密码" show-password></el-input>
            </el-form-item>
            <el-form-item  prop="rePassword">
                <el-input v-model="data.rePassword" type="password"  :prefix-icon="Lock" inline="true"  placeholder="请再次输入密码"  show-password></el-input>
            </el-form-item>
            <el-form-item  prop="address" v-if="ifPurchaser===true">
                <el-input v-model="data.address" :prefix-icon="LocationInformation" inline="true"  placeholder="请输入您的收货地址"></el-input>
            </el-form-item>
            <el-form-item prop="input_code">
                <el-input  v-model="data.input_code" style="width: 300px;display:inline" :prefix-icon="CircleCheck" placeholder="请输入验证码"></el-input>
                <div class="login-code" @click="refreshCode">
                    <!--验证码组件-->
                    <ValidCode :identifyCode="identifyCode"></ValidCode>
                </div>
            </el-form-item>
            <el-form-item >
                <el-radio-group class="el-radio__input" v-model="radio">
                    <el-radio style="margin-left: 20px;" :value="0" @click="ifPurchaser=true">采购商</el-radio>
                    <el-radio style="margin-left: 80px;" :value="1" @click="ifPurchaser=false">供应商</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--            注册按钮-->
            <el-form-item style="display: inline-block">
                <el-link type="info" :underline="false" @click="isRegister=false;refreshCode();clearRegisterData()">
                    ← 返回
                </el-link>
            </el-form-item>
            <el-form-item  style="display: inline-block;margin-left: 60px" >
                <el-button style="margin-left: 15px" type="primary" size="default" @click="register();clearRegisterData();refreshCode();">
                    注册
                </el-button>
            </el-form-item>
        </el-form>
    </el-row>

</template>


<style scoped>
/*//整个登录页面*/
.login-page {
    height: 100vh;
    background-color: #fff;
}
/*//登录页面左边布局*/
.login-bg {
    background: url("@/assets/login-left.jpg") no-repeat 60%/cover;
    border-radius: 0 20px 20px 0;
    /*width: 80%;*/
}
/*//登录表单*/
.login-form{
    padding-top: 50px;
    margin:0 auto;
}
/*//输入框*/
.el-form-item{
    font-size: 10px;
}
/*//登录验证码*/
.login-code{

}
/*输入框获得焦点时的颜色*/
.el-input{
    --el-input-focus-border-color: pink;
}

/*//选中角色时的单选框颜色*/
/deep/ .el-radio__input.is-checked + .el-radio__label {
    color:hotpink;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
    background: hotpink !important;
    border-color: pink !important;
}
/*//登陆注册按钮的颜色*/
.el-button{
background-color: #f13b82;
    border-color: pink;
}
.el-button:hover{
    background-color: palevioletred;
    border-color: pink;
}

/*//注册表单*/
.register-form{
    padding-top: 20px;
    margin:0 auto;
}
</style>
